<template>
    <el-dialog
        :show-close="false"
        width="60%"
        >
        <div class="confirmPopue">
            <div class="confirmPopue-title">{{title}}</div>
            <div class="confirmPopue-center">
                <div class="queue-right-mobile" >
                    <div class="mobile">手机号码：</div>
                    <div class="memberMobile">
                        <el-input v-model="memberMobile" placeholder="请输入手机号码"></el-input>
                    </div>
                    <div class="search-btn" @click="searchChange">查询</div>
                </div>
                <div class="queue-right-btn">
                    <div class="btn-items">
                    <div class="item" @click="handleNum('1')">1</div>
                    <div class="item" @click="handleNum('2')">2</div>
                    <div class="item" @click="handleNum('3')">3</div>
                    <div class="item spe" style="margin-right: 0;" @click="handleDelLastNum()"></div>
                    </div>
                    <div class="btn-items">
                    <div class="item" @click="handleNum('4')">4</div>
                    <div class="item" @click="handleNum('5')">5</div>
                    <div class="item" @click="handleNum('6')">6</div>
                    <div class="item" style="margin-right: 0;" @click="handleDelNum()">删除</div>
                    </div>
                    <div class="btn-items">
                    <div class="item" @click="handleNum('7')">7</div>
                    <div class="item" @click="handleNum('8')">8</div>
                    <div class="item" @click="handleNum('9')">9</div>
                    <div class="item" style="margin-right: 0;" @click="handleNum('0')">0</div>
                    </div>
                </div>
                <div class="jm-continar">
                     <div class="jm-list" v-if="TicketList.length > 0">
                         <div class="jm-name">有免排卷</div>
                         <div class="jm-sumbit" @click="useTicket">核销</div>
                     </div>
                     <div class="jm-list" v-else>
                        <div class="jm-name" style="margin: 0 auto;">暂无免排卷</div>
                    </div>
                </div>
                 
            </div>
            <div class="popup-btn">
                <div class="btn-cancle" @click="onCancel">关闭</div>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import Api from '@/api' 
const props = defineProps({
    title: {
        type: String,
        default: '提示'
    },
    content: {
        type: String,
        default: ''
    },
});

// const content = ref(props.content)

// Watch(()=>{

// })
const title = ref(props.title)
const emits = defineEmits(['update:show', 'cancel', 'confirm']);

const memberMobile = ref('')
const TicketList = ref([])
const searchChange = ()=> {
        Api.Common.PcObjProcess.Do({ functionName: "GetQueueTicket", orgCode: "0004", contentData:{"memberMobile":memberMobile.value}  })
        .then(res => {
            // TicketList.value = res
            TicketList.value.push(res)
            console.log(TicketList.value,'TicketList.value')
            ElNotification({
                title: '提示',
                message: '查询成功',
                type: 'success',
             })
        })
}

const useTicket = ()=> {
        Api.Common.PcObjProcess.Do({ functionName: "UseQueueTicket", orgCode: "0004", contentData:{"memberTicketCode":TicketList.value[0].MemberTicketCode,"memberMobile":memberMobile.value}  })
        .then(res => {
            console.log(res,'UseQueueTicket')
            ElNotification({
                title: '提示',
                message: res.result,
                type: 'success',
             })
             emits('cancel');
        })
}



const handleNum = (str) => {
    memberMobile.value += str
}

const handleDelLastNum = () => {
     memberMobile.value =  memberMobile.value.slice(0,  memberMobile.value.length - 1);
}

const handleDelNum = () => {
    memberMobile.value = ''
}


// UseQueueTicket
const onCancel = () => {
    emits('update:show');
    emits('cancel');
}

const onConfirm = () => {
    emits('confirm');
}


</script>
<style scoped lang="scss">
.confirmPopue{
  .confirmPopue-title{
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    line-height: 24px;
  }
  .confirmPopue-center{
    padding: 40px 0;
    .queue-right-mobile {
      display: flex;
      align-items: center;

      ::v-deep(.el-input__wrapper) {
        height: 48px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        line-height: 16px;
        padding-left: 20px;
      }

      .mobile {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
      }
      .memberMobile {
        width: 380px;
      }
       .search-btn {
        font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 48px;
              text-align: center;
              padding: 0 20px;
              margin-left: 20px;
              height: 48px;
              background: #FF6A00;
              border-radius: 8px;
              cursor: pointer;
       } 
    }
    .queue-right-btn {
        margin-top: 20px;

      .btn-items {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .item {
          width: 120px;
          height: 96px;
          text-align: center;
          background: #E6E6E6;
          border-radius: 8px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 32px;
          color: #212121;
          line-height: 96px;
          margin-right: 20px;

          &.spe {
            background-image: url('https://oss.jtmckj.com/pc/images/queue/i_btn_del.png');
            background-size: 52px 40px;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
      }
    }
    .jm-continar {
        padding-top: 20px;
        .jm-list {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .jm-name {
              font-size: 32px;
            }
            .jm-sumbit {
                text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FF6A00;
              line-height: 48px;
              width: 100px;
              height: 48px;
              background: #FFFFFF;
              border-radius: 8px;
              border: 1px solid #FF6A00;
              cursor: pointer;
            }
        }
    }
    
  }
  .popup-btn{
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-cancle{
              text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FF6A00;
              line-height: 60px;
              width: 160px;
              height: 60px;
              background: #FFFFFF;
              border-radius: 8px;
              border: 1px solid #FF6A00;
              cursor: pointer;
        }
        .btn-submit{
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 60px;
              text-align: center;
              width: 160px;
              height: 60px;
              background: #FF6A00;
              border-radius: 8px;
              cursor: pointer;
            }
  }
}
</style>